<template>
  <div class="container">
    <!-- 卡片区 -->

    <el-card>
      <!-- 面包屑 -->
      <el-breadcrumb separator="/" v-if="jump"  class="header">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>大数据</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 头部区 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="目录名称">
          <el-input
            v-model="formInline.dirName"
            placeholder="目录名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.state" placeholder="请选择">
            <el-option label="已启用" value="1"></el-option>
            <el-option label="已禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="empty">清除</el-button>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>

        <el-form-item class="fr">
           <!-- 返回学科 需要判断是由哪个页面进入决定是否显示-->
           <el-link icon="el-icon-back" type="primary" :underline="false" v-if="jump" @click="$router.back()" >返回学科</el-link>
          <el-button type="success" icon="el-icon-edit" @click="oppAdd"
            >新增目录</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 提示信息 -->
      <el-alert type="info" show-icon>
        <template slot="title"> 数据共 {{ total }}条 </template>
      </el-alert>

    <!-- 表单区域 -->

      <el-table :data="loadList" style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="subjectName" label="所属学科"></el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="subjectID" label="面试题数量"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.state === 1 ? "已启用" : "已禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="btnEditDialog(scope.row)">
              <span>{{ scope.row.state === 1 ? "禁用" : "启用" }}</span>
            </el-button>

            <el-button
              type="text"
              @click="showEditDialog(scope.row)"
              :disabled="scope.row.state === 1 ? true : false"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="removeById(scope.row.id)"
              :disabled="scope.row.state === 1 ? true : false"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
<!-- 分页 -->
      <div class="fr pages">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          background
          layout="prev, pager, next,sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

      <!-- 添加用户对话框 -->
      <el-dialog
        title="新增目录"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogClosed"
        :before-close="handleClose"
      >
        <!-- 内容主体区 -->
        <el-form
          :model="addForm"
          :rules="addFormrules"
          ref="addFormRef"
          label-width="100px"
        >
          <el-form-item label="所属学科" prop="subjectName" v-if="!jump">
            <el-select
              v-model="subjectName"
              placeholder="请选择"
              @change="getSubjectID"
            >
              <el-option
                v-for="(item, index) in simpleList"
                :key="index"
                :label="item.subjectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="目录名称" prop="directoryName"  >
            <el-input v-model="addForm.directoryName"></el-input>
          </el-form-item>
        </el-form>

        <!-- 底部区 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改对话框 -->
      <el-dialog
        title="修改目录"
        :visible.sync="editDialogVisible"
        width="50%"
        :before-close="handleClose"
        @close="editDialogClosed"
      >
        <el-form
          :model="editForm"
          label-width="100px"
          :rules="editFormrules"
          ref="editFormRef"
        >
          <el-form-item label="所属学科" prop="subjectName" v-if="!jump">
            <el-select
              v-model="editForm.subjectID"
              placeholder="请选择"
              @change="modifySubjectID"
            >
              <el-option
                v-for="(item, index) in simpleList"
                :key="index"
                :label="item.subjectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="目录名称" prop="directoryName">
            <el-input v-model="editForm.directoryName"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editUserInfo">确 定</el-button>
        </span>
      </el-dialog>

  </div>
</template>

<script>
import { list, add, update, remove, changeState } from '@/api/hmmm/directorys'
// 导入学科列表
import { list as SubjectInterface } from '@/api/hmmm/subjects'

export default {
  data () {
    return {
      page: 1,
      pageSize: 10,
      formInline: {
        dirName: '',
        state: ''
      },
      //  获取用户列表的参数对象
      queryInfo: {
        query: '',
        page: '1', // 当前页数
        pagesize: '2' // 页尺寸
      },
      loadList: [],
      simpleList: [],
      total: 0,
      // 控制添加对话框显示隐藏
      addDialogVisible: false,
      // 添加目录的表单数据
      addForm: {
        subjectID: '',
        directoryName: ''
      },
      // 添加目录表单规则
      addFormrules: {
        directoryName: [
          { required: true, message: '请输入所属目录', trigger: 'blur' }
        ]
      },
      subjectName: '',
      // 控制修改目录对话框的显示隐藏
      editDialogVisible: false,
      // 查询到的修改目录数据
      editForm: {
        subjectID: '',
        directoryName: '',
        id: ''
      },
      // 修改目录规则
      editFormrules: {
        directoryName: [
          { required: true, message: '请输入所属目录', trigger: 'blur' }
        ]
      }
    }
  },

  created () {
    // 数据列表
    this.getAllDataList()
    this.getSimpleDataList()
    // console.log('121', this.$route.query)
  },

  methods: {
    // 搜索
    onSubmit () {
      // 搜索重置页码
      this.page = 1
      this.getAllDataList()
      // console.log(this.formInline)
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)

      this.pageSize = val

      this.getAllDataList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)

      this.page = val

      this.getAllDataList()
    },
    // 获取列表数据
    async getAllDataList () {
      const { page, pageSize } = this
      const { state, dirName } = this.formInline
      const params = {
        page,
        pagesize: pageSize
      }

      if (state) params.state = state
      if (dirName) params.directoryName = dirName
      const { data: res } = await list(params)
      this.loadList = res.items
      this.total = res.counts
      // console.log('1', res)
    },
    // 获取简单数据列表
    async getSimpleDataList () {
      const { data: res } = await SubjectInterface()
      this.simpleList = res.items
      // console.log(res)
    },
    //  清除事件
    empty () {
      this.formInline.state = ''
      this.formInline.dirName = ''
      this.getAllDataList()
    },
    //  确认关闭对话框
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 监听添加目录框关闭事件
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
    },
    //  修改框关闭事件
    editDialogClosed () {
      this.$refs.editFormRef.resetFields()
    },
    // 点击,添加新用户
    addUser () {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return
        // 正确发起请求
        await add({
          subjectID: this.addForm.subjectID,
          directoryName: this.addForm.directoryName
        })

        // console.log(res)
        this.$message.success('新增目录成功')
        //  隐藏添加用户的对话框
        this.addDialogVisible = false
        // 重新加载数据列表
        this.getAllDataList()
      })
    },
    getSubjectID (val) {
      this.addForm.subjectID = val
    },
    modifySubjectID (val) {
      this.editForm.SubjectID = val
    },
    // 添加事件 展示对话框
    oppAdd () {
      this.addDialogVisible = true
      this.getSimpleDataList()
    },
    // 修改事件  展示修改编辑对话框
    showEditDialog (row) {
      // console.log('row', row)
      // const {data :res} =await
      this.editDialogVisible = true
      this.editForm.subjectID = row.subjectID
      this.editForm.directoryName = row.directoryName
      this.editForm.id = row.id
    },
    // 修改事件成功并刷新列表
    editUserInfo () {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return
        // 正确发起修改请求
        const { data: res } = await update({
          subjectID: this.editForm.subjectID,
          id: this.editForm.id,
          directoryName: this.editForm.directoryName
        })
        // console.log(res)
        // 重新加载数据列表
        this.loadList = res.items
        this.getAllDataList()
        this.$message.success('修改成功')
        //  隐藏添加用户的对话框
        this.editDialogVisible = false
      })
    },
    // 删除事件
    async removeById (id) {
      // console.log('id', id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({
          id: id
        })
        this.getAllDataList()
        this.$message.success('删除成功')
      })
    },
    // 按钮事件 修改按钮状态
    async btnEditDialog (row) {
      await changeState({
        id: row.id,
        state: row.state ? 0 : 1
      })
      this.$message.success('修改成功')
      // 加载数据列表
      this.getAllDataList()
    }

  },
  computed: {
    // 跳转后显示与隐藏的内容
    jump () {
      if (this.$route.query.id) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style scoped lang='less'>
.header {
 padding:6px 20px 20px 0;
}
.el-link{
  margin-right: 10px;
}
.el-select {
 width: 100% ;
}
.el-pagination is-background{
  margin-top: 10px;
}
.pages {
  padding-top: 10px;
}
</style>
